<template>

    <div
        class="hidden sm:flex bg-[color:var(--menu-bg)] dark:bg-[#121212] flex-col z-10 shadow-[0_4px_10px_-1px_rgba(0,0,0,0.5)] overflow-hidden">
        <!-- 导航栏 Logo 或标题 -->
        <div v-if="!isCollapse" class="flex w-64 p-6 items-center cursor-pointer" @click="jumpHome">
            <img src="../assets/logo.svg" />
        </div>
        <div v-else class="flex w-24 p-6 items-center cursor-pointer" @click="jumpHome">
            <img src="../assets/logo-mini.svg" />
        </div>
        <!-- 导航菜单 -->
        <Menu />
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Menu from './menu.vue'
import { settingMode } from '@/stores/setting'
const settingsStore = settingMode()
const isCollapse = computed(() => settingsStore.collapse)
const jumpHome = () => {
    window.location.href = '/'
}
</script>